import { Component } from '@angular/core';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { exists, getO } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-list',
  template: `
    <div class="apes-field-list">
      <apes-list [apesDataSource]="Data" apesBordered [apesHeader]="headerItem" [apesRenderItem]="defaultItem" [apesSize]="'small'">
        <ng-template #headerItem>
          <div class="apes-field-list-header" apes-row>
            <ng-container *ngFor="let item of listItem">
              <div apes-col [apesSpan]="item.span? item.span : 6">{{item.headerName}}</div>
            </ng-container>
          </div>
        </ng-template>
        <ng-template #defaultItem let-item>
          <apes-list-item class="apes-field-list-main" apes-row>
            <ng-container *ngFor="let data of listItem">
              <div apes-col [apesSpan]="data.span? data.span : 6">{{item[data.id]}}</div>
            </ng-container>
          </apes-list-item>
        </ng-template>
      </apes-list>
    </div>
  `,
  styles: [`
    .apes-field-list {
      margin-bottom: 16px;
    }
  `],
})
export class FormlyFieldList extends ApesField {

  listItem: any = [];

  constructor(
    protected apiService: ApiService,
    protected events: Events,
    protected expressionService: ExpressionService,
    protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit() {
    this.listItem = getO(this.to.listItem);
  }

  get Data() {
    return this.formControl.value || [];
  }
}
